<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
            id都是#号  class名都是. 元素选择器都是他自己 例如 div用选择器就是div


-->
    <link rel="stylesheet" href="../resource/img/style.css">
    <script src="../resource/img/jquery-1.8.3.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function(){
                $("#one").css("background-color","pink");
            })
            $("#btn2").click(function () {
                $(".mini").css("background-color","pink")
            })
            $("#btn3").click(function () {
                $("div").css("background-color","pink")
            })
            $("#btn4").click(function () {
                $("*").css("background-color","pink")
            })
            $("#btn5").click(function () {
                $("#two,.mini").css( "background-color","pink")
            })
        })
    </script>
</head>
<body>
            <input type="button" id="btn1" value="选择为one的元素"/>
            <input type="button" id="btn2" value="选择样式为mini的元素"/>
            <input type="button" id="btn3" value="选择所有的div元素"/>
            <input type="button" id="btn4" value="选择所有元素"/>
            <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
            <hr>
            <div id="one">
                <div class="mini">
                    111
                </div>
            </div>

            <div id="two">
                <div class="mini">
                    222
                </div>
                <div class="mini">
                    333
                </div>
            </div>

            <div id="three">
                <div class="mini">
                    444
                </div>
                <div class="mini">
                    555
                </div>
                <div class="mini">
                    666
                </div>
            </div>
            <span id="four">
                </span>
</body>
</html>